<template>
  <div class="test-page">
    <div class="test-content">
      <h1>蜂云盒子 - 测试页面</h1>
      <p>这是一个测试页面，用于验证新的签到弹窗功能。</p>

      <div class="test-buttons">
        <a-button type="primary" size="large" @click="testCheckin" style="margin-right: 10px">
          测试签到弹窗
        </a-button>
        <a-button type="default" size="large" @click="testShare" style="margin-right: 10px">
          测试分享功能
        </a-button>
        <a-button type="default" size="large" @click="testFeedback" style="margin-right: 10px">
          测试反馈功能
        </a-button>
        <a-button type="default" size="large" @click="testAuthor"> 测试作者信息 </a-button>
      </div>

      <div class="test-info">
        <h3>功能说明：</h3>
        <ul>
          <li>右下角有一个浮动操作按钮（+号）</li>
          <li>点击+号会展开子菜单</li>
          <li>包含：每日签到、关于作者、分享网站、联系作者</li>
          <li>每个功能都有对应的弹窗</li>
          <li>顶部栏应该正常显示</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { message } from 'ant-design-vue'

  // 测试函数
  const testCheckin = () => {
    message.info('请点击右下角的浮动按钮，然后选择"每日签到"')
  }

  const testShare = () => {
    message.info('请点击右下角的浮动按钮，然后选择"分享网站"')
  }

  const testFeedback = () => {
    message.info('请点击右下角的浮动按钮，然后选择"联系作者"')
  }

  const testAuthor = () => {
    message.info('请点击右下角的浮动按钮，然后选择"关于作者"')
  }
</script>

<style scoped>
  .test-page {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }

  .test-content {
    background: white;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 800px;
  }

  .test-content h1 {
    color: #333;
    margin-bottom: 20px;
    font-size: 2rem;
  }

  .test-content p {
    color: #666;
    margin-bottom: 30px;
    font-size: 1.1rem;
  }

  .test-buttons {
    margin-bottom: 40px;
  }

  .test-info {
    text-align: left;
    background: #f8f9fa;
    padding: 20px;
    border-radius: 12px;
  }

  .test-info h3 {
    color: #333;
    margin-bottom: 15px;
  }

  .test-info ul {
    color: #666;
    line-height: 1.6;
  }

  .test-info li {
    margin-bottom: 8px;
  }
</style>
